<template>
  <view style="background-color: #FF5555;">

    <view :class="{register:top}">
      <!-- <image src="../../../static/logo/logo.png" class="logo" mode="widthFix"></image> -->
      <view class="contents">
        <view>
          <input class="uni-input" @input="mobileInput" type="text" placeholder="您的身份证号码" placeholder-style="color:#aaa"
            style="background: transparent;" maxlength="18" />
          <!-- <view class="webkit" style="margin: 0 30upx;border-bottom: 1px solid #aaa;">
            <input type="number" @input="verify" class="flex" maxlength="5" value="" placeholder="5位短信验证码"
              placeholder-style="color:#aaa" />
            <button class="inputright" type="default" :disabled="codebtn" @click="getcode" v-cloak>{{codetext}}</button>
          </view> -->
          <input class="uni-input" @input="inputVmodel($event, 'realname')" type="text" placeholder="真实姓名"
            placeholder-style="color:#aaa" style="background: transparent;" />

          <input class="uni-input" @input="pwdInput" password type="text" placeholder="请输入登录密码" placeholder-style="color:#aaa"
            style="background: transparent;" />
          <input class="uni-input" @input="pwd2Input" password type="text" placeholder="请确认登录密码" placeholder-style="color:#aaa"
            style="background: transparent;" />
          <input class="uni-input" @input="midInput" type="text" :value="inid" placeholder="邀请人ID" placeholder-style="color:#aaa"
            style="background: transparent;" disabled />
          <input class="uni-input" @input="inputVmodel($event, 'agentid')" :value="agentid" type="number" placeholder="上级ID"
            placeholder-style="color:#aaa" style="background: transparent;" disabled />
        </view>
        <button type="" class="login-btn" @click="register" :loading="loading" style="background: #FF5555;color:#fff">立即注册</button>
        <!-- <view class="btn-group webkit" style="border: 0;margin: 0 30upx;">
          <view class="flex"></view>
          <button type="primary" @click="backlogin" style="color:#aaa">返回登录</button>
        </view> -->
      </view>
    </view>

    <view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">温馨提示</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">注册成功~您的登录ID是：{{userId}}</view>
        <view class="cu-bar bg-white justify-end">
          <view class="action click-list" style="width: 100%;justify-content: space-between;padding: 0 80rpx;">
            <button class="click-btn cu-btn line-green text-green" style="color: #E25151;" @tap="ctrlC">点击复制</button>
            <button class="click-btn cu-btn bg-green" style="background-color: #E25151;" @tap="goPage">确认跳转</button>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        res: [],
        area: true,
        top: false,
        systemInfo: {},
        loading: false,
        timestamp: 0,
        mobile: '',
        realname: '',
        pwd: '',
        pwd1: '',
        imgcode: "",
        agentid: "",
        inid: "",
        verifycode: '',
        codetext: '获取验证码',
        codebtn: false,
        codenum: 60,
        modalName: null,
        userId: '111',
      };
    },
    onLoad: function(e) {
      this.agentid = e.agentid;
      this.inid = uni.getStorageSync("mid");
      console.log(e, this.agentid, '查看传进来的值')
      uni.getSystemInfo({
        success: (res) => {
          this.systemInfo = res
        }
      })
      var timestamp = (new Date()).getTime();
      this.timestamp = timestamp
    },
    methods: {
      change(e) {
        if (e.currentTarget.dataset.id == 1) {
          this.area = false
          this.top = true
        } else {
          uni.showToast({
            title: '请联系管理员',
            icon: "none"
          });
        }
      },
      changeImg() {
        var timestamp = (new Date()).getTime();
        this.timestamp = timestamp
      },
      async getcode() {
        if (this.mobile == "") {
          uni.showToast({
            title: '请输入手机号',
            icon: "none"
          });
        }
        // else if (this.imgcode == "") {
        // 	uni.showToast({
        // 		title: '请输入图形验证码',
        // 		icon: "none"
        // 	});
        // } 
        else {
          let res = await this.$myRequest({
            url: '/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.verifycode&app=1',
            data: {
              mobile: this.mobile,
              temp: 'sms_reg'
            }
          })
          uni.showToast({
            title: res.data.result.message,
            icon: "none"
          });
          if (res.data.status == 1) {
            this.codebtn = true
            var codetexts = setInterval(() => {
              this.codenum = this.codenum - 1
              this.codetext = this.codenum + 's'
            }, 1000)
            setTimeout(() => {
              this.codebtn = false
              clearInterval(codetexts);
              this.codetext = '重新发送'
            }, 60000)
          }
        }
      },
      async register() {
        let that = this;
        if (this.mobile == "") {
          uni.showToast({
            title: '请输入身份证号码',
            icon: "none"
          });
        } else if (!(
            /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
            .test(this.mobile))) {
          uni.showToast({
            title: '请输入正确的身份证号码',
            icon: "none"
          });
        } else if (this.realname == "") {
          uni.showToast({
            title: '请输入真实姓名',
            icon: "none"
          });
        } else if (this.pwd == "") {
          uni.showToast({
            title: '请输入登录密码',
            icon: "none"
          });
        } else if (this.pwd1 == "") {
          uni.showToast({
            title: '请确认登录密码',
            icon: "none"
          });
        } else {
          this.loading = true
          let data = {
            idcard: this.mobile,
            realname: this.realname,
            type: 0,
            agentid: this.agentid,
            pwd: this.pwd,
            pwd1: this.pwd1,
            inid: this.inid,
          }
          // this.loading = false
          let res = await this.$myRequest({
            url: "/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=account.register&app=1",
            method: "POST",
            data,
          })
          console.log(res)
          if (res.data.status == 0) {
            return uni.showToast({
              title: res.data.result.message,
              icon: 'none',
            });
          } else if (res.data.status == 1) {
            let arr = res.data.result.message.split('：')
            that.userId = arr[arr.length - 1];
            console.log('查看用户id', that.userId)
            that.showModal();
          }
        }
      },


      showModal(e) {
        this.modalName = 'DialogModal1'

      },
      hideModal(e) {
        this.modalName = null
      },
      goPage() {
        uni.redirectTo({
          url: './team'
        })
      },
      ctrlC() {
        uni.setClipboardData({
          data: this.userId,
          success: () => {
            uni.showToast({
              title: '复制成功~'
            });
          }
        });
      },
      backlogin() {
        uni.navigateBack();
      },

      inputVmodel(e, names) {
        this[names] = e.detail.value
      },

      mobileInput(e) {
        this.mobile = e.target.value
      },
      imgcodeInput(e) {
        this.imgcode = e.target.value
      },
      pwd2Input(e) {
        this.pwd1 = e.target.value
      },
      pwdInput(e) {
        this.pwd = e.target.value
      },
      midInput(e) {
        this.inid = e.target.value
      },
      verify(e) {
        this.verifycode = e.target.value
      }
    }
  }
</script>

<style>
  @import "/colorui/main.css";
  @import "/colorui/icon.css";

  /* page {background-color:#fff;} */
  .logo {
    display: block;
    margin: 0 auto 60upx;
    width: 200upx;
    margin-top: 100upx;
  }

  .area.webkit {
    position: absolute;
    z-index: 999;
    top: 50%;
    margin-top: -280upx;
    border: 0;
  }

  .area view {
    width: 280upx;
    height: 280upx;
    border: 2upx solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
    padding-top: 56upx;
    background: #FFFFFF0A;
  }

  .area image {
    width: 100upx;
    height: 100upx;
    display: block;
    margin: 0 auto;
  }

  .area text {
    display: block;
    color: #fff;
    text-align: center;
    margin-top: 10upx;
  }

  .top {
    width: 180upx;
    height: 180upx;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -90upx;
    top: -200upx;
    transition: .3s all;
  }

  .register .top {
    top: 200upx;
  }

  .uni-list-cell {
    width: 50%;
    padding: 24upx 80upx;
  }

  .uni-list-cell:after {
    display: none;
  }

  .with-fun .uni-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .btn-group button {
    background: transparent;
    color: #fff;
    font-size: 28upx;
    margin: 0;
    padding: 0;
    opacity: .8;
  }

  .btn-group button:after {
    display: none;
  }

  input {
    margin: 0 30upx;
    padding: 24upx;
    background: transparent;
    border-bottom: 1px solid #aaa;
    height: auto !important;
  }

  .login-btn {
    color: #fff;
    border: 2upx solid #fff;
    background: transparent;
    height: 84upx;
    line-height: 84upx;
    font-size: 28upx;
    margin: 50upx 30upx 10upx;
  }

  .login-btn:after {
    display: none;
  }

  uni-button[loading][type=default] {
    color: rgba(255, 255, 255, 0.6);
    background-color: transparent;
  }

  .contents {
    position: absolute;
    width: 100%;
    top: 230upx;
    transition: .3s all;
  }

  .register .contents {
    top: 400upx;
    padding: 40upx;
    box-sizing: border-box;
  }

  .inputright {
    width: 200upx;
    height: 52upx;
    margin-top: 24upx;
  }

  button.inputright {
    line-height: 48upx;
    font-size: 24upx;
    background: transparent;
    color: #aaa;
    border: 2upx solid #fff;
  }

  input.flex {
    border: 0;
    margin: 0 0upx;
  }

  .webkit {
    border-bottom: 1px solid #fff;
  }
</style>
